<template>
  <div class="container">
    <header class="header">
      <slot name="header"></slot>
    </header>
    <main class="main">
      <div v-for="(item, index) in data" :key="index">  <!--作用域插槽-->
        <slot :data="item" :index="index" v-bind="{item, i: index}"></slot>
      </div>
    </main>
    <footer class="footer">
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'

type contentObj = {
  content: string
}

const data = ref<contentObj[]>([
  { content: '江南' },
  { content: '七里香' },
  { content: '再见' },
  { content: '思念是一种病' },
  { content: '无赖' },
  { content: '有没有那么一首歌' },
])

</script>

<style lang='scss' scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  height: 100vh;

  .header {
    height: 100px;
    background-color: red;
    text-align: center;
    color: #fff;
    line-height: 100px;
  }

  .main {
    flex:1;
    background-color: yellow;
  }

  .footer {
    height: 100px;
    background-color: blue;
    text-align: center;
    color: #fff;
    line-height: 100px;
  }
}
</style>